<template>
  <div>
    <van-nav-bar title="学生注册" :border="false" left-arrow @click-left="go"></van-nav-bar>
    <van-row>
      <van-col span="24">
        <van-cell-group>
          <van-field
            v-model="phone"
            label="手机号"
            placeholder="请输入手机号"
            left-icon="phone-o"
          >
            <van-icon v-show="phone" @click="phone = ''" slot="button" name="close" />
          </van-field>
        </van-cell-group>
      </van-col>
    </van-row>
    <van-row>
      <van-col span="24">
        <van-cell-group>
          <van-field
            v-model="sms"
            center
            clearable
            label="短信验证码"
            placeholder="请输入短信验证码"
          >
            <van-button slot="button" :disabled="disabled" @click="getCode" size="small" type="primary">{{this.btntxt}}</van-button>
          </van-field>
        </van-cell-group>
      </van-col>
    </van-row>
    <van-row>
      <van-col span="24">
        <van-cell-group>
          <van-field
            v-model="password"
            label="密码"
            type="password"
            placeholder="请输入登录密码"
            left-icon="home-o"
          >
            <van-icon v-show="password" @click="password = ''" slot="button" name="close" />
          </van-field>
        </van-cell-group>
      </van-col>
    </van-row>
    <van-row>
      <van-col span="24">
        <van-cell-group>
          <van-field
            v-model="org.name"
            label="选择机构"
            placeholder="请选择机构"
            left-icon="logistics"
            @focus="showOrg"
          >
            <van-icon v-show="org" @click="org = {}" slot="button" name="close" />
          </van-field>
          <van-actionsheet
            v-model="show"
            cancel-text="取消"
            :actions="orgIdList"
            @select="onSelect"
            @cancel="onCancel"
          />
        </van-cell-group>
      </van-col>
    </van-row>
    <van-cell-group class="checkbox">
      <van-checkbox v-model="checked" checked-color="#07c160">
        用户注册即代表同意
        <span class="the-service">《用户服务条款》</span>
      </van-checkbox>
    </van-cell-group>
    <van-button class="login-btn" @click="registered" round size="large">立即注册</van-button>
    <p class="the-registered">
      <router-link class="the-registered-to" to='/login'>已有账号直接登录</router-link>
    </p>
  </div>
</template>

<script>
  export default {
    name: 'student-registration',
    data() {
      return {
        show: false,
        phone: '',
        sms: '',
        password: '',
        org: {},
        checked: true,
        orgIdList: [],
        disabled: false,
        btntxt: '获取验证码',
        time: 0
      }
    },
    mounted() {
      this.orgList()
    },
    methods: {
      orgList() {
        this.$get('/api/api/sys/org/list').then((res) => {
          if (res.code === 0) {
            this.orgIdList = res.data
          }
        })
      },
      getCode() {
        if (!this.phone) {
          this.$toast('手机号不能为空')
        }
        if (!this.$objectUtil.checkPhone(this.phone)) {
          this.$toast('手机号格式错误')
        }
        this.$post('/api/api/student/register/phoneCode', this.$qs.stringify({phone: this.phone})).then((res) => {
          if (res.code === 0) {
            if (res.data.code === 20004) {
              this.$toast('此手机号已经注册')
            } else {
              this.time = 60
              this.disabled = true
              this.timer()
              this.$toast.success('发送成功')
            }
          }
        })
      },
      registered() {
        if (!this.phone) {
          this.$toast('手机号不能为空')
          return false
        } else if (!this.$objectUtil.checkPhone(this.phone)) {
          this.$toast('手机号格式错误')
          return false
        } else if (!this.password) {
          this.$toast('密码不能为空')
          return false
        } else if (!this.password) {
          this.$toast('请输入密码')
          return false
        } else if (!this.org.name) {
          this.$toast('请选择机构')
          return false
        } else if (!this.checked) {
          this.$toast('请查看服务条款')
          return false
        }
        this.$post('/api/api/student/register', {
          code: this.sms,
          mobile: this.phone,
          orgId: this.org.id,
          password: this.password
        }).then((res) => {
          if (res.code === 0) {
            if (res.data.code === 20004) {
              this.$toast('验证码错误')
            } else {
              this.$dialog.alert({
                title: '用户注册成功',
                confirmButtonText: '去登陆'
              }).then(() => {
                this.$router.push('/login')
              })
            }
          }
        })
      },
      timer() {
        if (this.time > 0) {
          this.time--
          this.btntxt = this.time + 's后获取'
          setTimeout(this.timer, 1000)
        } else {
          this.time = 0
          this.btntxt = '获取验证码'
          this.disabled = false
        }
      },
      go() {
        this.$router.go(-1)
      },
      onSelect(item) {
        this.show = false
        this.org = item
      },
      onCancel() {
        this.show = false
      },
      showOrg() {
        this.show = true
      }
    }
  }
</script>

<style scoped>
  .checkbox{
    padding: 20px 40px;
    font-size: 24px;
  }
  .the-service{
    font-size: 26px;
    color: #000;
    font-weight: 600;
  }
  .login-btn{
    width: 84%;
    background: #36aaf5;
    color: #fff;
    margin: 40px 8%;
  }
  .the-registered{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-content: center;
    margin-top: 40px;
  }
  .the-registered-to{
    font-size: 24px;
    color: #d5d5d5;
    text-decoration:underline;
  }
</style>
